<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test01</title>
    <script src="https://unpkg.com/vue/dist/vue.js" type="text/javascript"></script>
</head>
<body>

<div id="app">
    <!--    <div v-if="isShow">Green Template 01</div>-->

    <!--    <template v-if="isShow">-->
    <!--        <p>A</p>-->
    <!--        <p>B</p>-->
    <!--        <p>C</p>-->
    <!--    </template>-->

    <!--    <div v-if="isShow">Green Template 01</div>-->
    <!--    <div v-else>Green Template 02</div>-->
    <!--    <div v-if="grade >= 90">Grade A</div>-->
    <!--    <div v-else-if="grade >= 80">Grade B</div>-->
    <!--    <div v-else-if="grade >= 70">Grade C</div>-->
    <!--    <div v-else-if="grade >= 60">Grade D</div>-->
    <!--    <div v-else>Grade Fail</div>-->

    <!--    <div v-if="login_type == 'U'">-->
    <!--        User Name: <input key="username">-->
    <!--    </div>-->
    <!--    <div v-else-if="login_type == 'E'">-->
    <!--        Email: <input key="email">-->
    <!--    </div>-->
    <!--    <br/>-->
    <!--    <button @click="toggle()">Toggle</button>-->

    <div v-show="isShow">Green Template 01</div>

    <template v-show="isShow">
        <p>A</p>
        <p>B</p>
        <p>C</p>
    </template>

</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            isShow: false,
            grade: 58,
            login_type: 'U',
        },
        methods: {
            toggle: function () {
                if (this.login_type == 'U') {
                    this.login_type = 'E'
                } else if (this.login_type == 'E') {
                    this.login_type = 'U'
                } else {
                    this.login_type = 'U'
                }
            }
        }
    });

</script>

</body>
</html>